<div class="row">
    <div class="col-md-12">
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group">
                <button class="btn btn-sm btn-primary" ng-click="state.isNewTask = true">
                    <i class="glyphicon glyphicon-plus"></i>
                    Add Task
                </button>
            </div>
            <div class="btn-group">
                <button class="btn btn-sm btn-primary" ng-click="toggleGroupedView()">
                    <i class="glyphicon glyphicon-th-list"></i>
                    Show {{state.showGrouped ? 'as a List' : 'Groups'}}
                </button>
            </div>

            <!-- <div class="btn-group pull-right" role="group">
                <page-sizer collection="tasks" sizes="[10, 15, 30, 100]"></page-sizer>
            </div> -->

            <div class="pull-right form-inline">
                <div class="input-group input-group-sm">
                    <filter-box collection="tasks"></filter-box>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mv-s" ng-show="tasks.total === 0">
    <div class="col-md-12">
        <div class="empty-message">No task found for this case.</div>
    </div>
</div>

<div class="row mt-l" ng-show="state.isNewTask">
    <div class="col-md-12">
        <form name="form" ng-submit="addTask(); state.isNewTask = false;">
            <div class="row">
                <div class="col-sm-3">
                  <div class="form-group">
                      <input name="group" class="form-control" ng-model="newTask.group" type="text" placeholder="Task group"
                          uib-typeahead="g for g in groups | filter:$viewValue"
                          typeahead-min-length="0">
                  </div>
                </div>
                <div class="col-sm-9">
                  <div class="input-group input-group">
                      <input name="title"class="form-control" ng-model="newTask.title" type="text" placeholder="Task title" required>
                      <span class="input-group-btn">
                          <button class="btn btn-default" ng-disabled="form.$invalid" type="submit">
                              <i class="text-success glyphicon glyphicon-ok"></i>
                          </button>
                          <button class="btn btn-default" ng-click="state.isNewTask = false" type="button">
                              <i class="text-danger glyphicon glyphicon-remove"></i>
                          </button>
                      </span>
                  </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="row mt-l" ng-show="!state.showGrouped && tasks.total !== 0">
    <div class="col-md-12">
        <table class="table table-hover valigned tasks-table">
            <thead>
                <tr>
                    <th style="width: 20px"></th>
                    <th style="width: 40px"></th>
                    <th style="width: 250px">Group</th>
                    <th>Task</th>
                    <th style="width: 150px">Date</th>
                    <th style="width: 150px">Assignee</th>
                    <th style="width: 250px" class="text-right">Actions</th>
                </tr>
            </thead>
            <tbody ng-repeat="task in tasks.values">
                <tr class="task-row" ng-class="{'warning': (task.status == 'InProgress' && task.flag == true)}">
                    <td>
                        <a href ng-click="collapseOptions[task.id] = !collapseOptions[task.id]" ng-show="task.description" uib-tooltip="Show/Hide description" tooltip-placement="right">
                          <i class="fa" ng-class="{
                            true: 'fa-chevron-up',
                            false: 'fa-chevron-down'
                          }[!!collapseOptions[task.id]]"></i>
                        </a>
                    </td>
                    <td class="task-status" align="center" ng-switch="task.status">
                        <i ng-switch-when="Completed" class="text-success glyphicon glyphicon-ok"></i>
                        <i ng-switch-when="InProgress" class="glyphicon" ng-class="{true:'text-yellow glyphicon-flag', false:'text-primary glyphicon-play'}[task.flag]"></i>
                    </td>
                    <td>
                        <updatable-select options="groups" on-update="updateField('group', newValue, task)" value="task.group"></updatable-select>
                    </td>
                    <td>
                      <div>
                          <a href ui-sref="app.case.tasks-item({caseId: caseId, itemId:task.id})">{{task.title}}</a>
                      </div>
                      <div ng-show="task.status === 'Completed'" class="text-success">
                          Closed after <em>{{(task.endDate - task.startDate) | amDurationFormat : 'milliseconds'}}</em>
                      </div>
                      <div ng-show="task.status === 'InProgress'" class="text-warning">
                          Started <em am-time-ago="task.startDate"></em>
                      </div>
                    </td>
                    <td>{{task.startDate | showDate}}</td>
                    <td>
                        <span ng-show="task.owner">
                            <updatable-user on-update="updateField('owner', newValue, task)" value="task.owner"/>
                        </span>
                        <span ng-show="!task.owner">
                            <updatable-user on-update="updateField('owner', newValue, task)" value="notassigned"/>
                        </span>
                    </td>
                    <!--  class="task-delete" -->
                    <td align="right" class="task-actions">
                        <span class="ml-xs clickable text-danger task-delete" ng-click="removeTask(task)">
                            <i class="fa fa-times"></i>
                            Delete
                        </span>
                        <span class="ml-xs clickable text-success action-button" ng-show="task.status == 'Completed'" ng-click="openTask(task)">
                            <i class="fa fa-check-circle"></i>
                            Reopen
                        </span>
                        <span class="ml-xs clickable text-muted action-button" ng-show="task.status == 'InProgress'" ng-click="closeTask(task)">
                            <i class="fa fa-check-circle-o"></i>
                            Close
                        </span>
                        <span class="ml-xs clickable text-primary action-button" ng-show="task.status == 'Waiting'" ng-click="startTask(task)">
                            <i class="fa fa-play"></i>
                            Start
                        </span>

                        <span class="ml-xs" uib-dropdown ng-if="appConfig.connectors.cortex.enabled">
                            <a href class="text-primary noline nowrap" ng-click="getTaskResponders(task.id, true)" uib-dropdown-toggle>
                                <i class="text-primary fa fa-cog"></i>
                                <!-- Responders
                                <i class="text-primary fa fa-angle-down"></i> -->
                            </a>
                            <ul class="dropdown-menu align-right" uib-dropdown-menu>
                              <li ng-if="taskResponders && taskResponders.length === 0">
                                <a href ng-click="getTaskResponders(task.id, true)">
                                  <strong><i class="fa fa-refresh mr-xxs"></i> No responders available</strong>
                                </a>
                              </li>
                              <li ng-repeat="responder in taskResponders">
                                <a href ng-click="runResponder(responder.id, responder.name, task)">
                                  <strong>{{responder.name}}</strong>
                                  <br>
                                  <small>{{responder.description}}</small></a>
                              </li>
                            </ul>
                        </span>
                    </td>
                </tr>

                <tr ng-if="task.description && collapseOptions[task.id]">
                    <td colspan="7" class="wrap">
                        <div marked="task.description" class="mt-xxs filter-panel markdown"></div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="row mt-l" ng-show="state.showGrouped && tasks.total !== 0">
    <div class="col-md-12">
        <div class="panel panel-default" ng-repeat="group in groupedTasks">
            <div class="panel-heading">
                <strong>{{group.group || 'Not Specified'}}</strong> <small>({{group.tasks.length}} task(s))</small>
            </div>
            <div class="panel-body p-0">
                <table class="table table-hover valigned tasks-table">
                    <thead>
                        <tr>
                            <th style="width: 20px"></th>
                            <th style="width: 40px"></th>
                            <th style="width: 250px">Group</th>
                            <th>Task</th>
                            <th style="width: 150px">Date</th>
                            <th style="width: 150px">Assignee</th>
                            <th style="width: 250px" class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody ng-repeat="task in group.tasks">
                        <tr class="task-row" ng-class="{'warning': (task.status == 'InProgress' && task.flag == true)}">
                            <td>
                                <a href ng-click="collapseOptions[task.id] = !collapseOptions[task.id]" ng-show="task.description" uib-tooltip="Show/Hide description" tooltip-placement="right">
                                  <i class="fa" ng-class="{
                                    true: 'fa-chevron-up',
                                    false: 'fa-chevron-down'
                                  }[!!collapseOptions[task.id]]"></i>
                                </a>
                            </td>
                            <td class="task-status" align="center" ng-switch="task.status">
                                <i ng-switch-when="Completed" class="text-success glyphicon glyphicon-ok"></i>
                                <i ng-switch-when="InProgress" class="glyphicon" ng-class="{true:'text-yellow glyphicon-flag', false:'text-primary glyphicon-play'}[task.flag]"></i>
                            </td>
                            <td>
                                <updatable-select options="groups" on-update="updateField('group', newValue, task)" value="task.group"></updatable-select>
                            </td>
                            <td>
                              <div>
                                  <a href ui-sref="app.case.tasks-item({caseId: caseId, itemId:task.id})">{{task.title}}</a>
                              </div>
                              <div ng-show="task.status === 'Completed'" class="text-success">
                                  Closed after <em>{{(task.endDate - task.startDate) | amDurationFormat : 'milliseconds'}}</em>
                              </div>
                              <div ng-show="task.status === 'InProgress'" class="text-warning">
                                  Started <em am-time-ago="task.startDate"></em>
                              </div>
                            </td>
                            <td>{{task.startDate | shortDate}}</td>
                            <td>
                                <span ng-show="task.owner">
                                    <updatable-user on-update="updateField('owner', newValue, task)" value="task.owner"/>
                                </span>
                                <span ng-show="!task.owner">
                                    <updatable-user on-update="updateField('owner', newValue, task)" value="notassigned"/>
                                </span>
                            </td>
                            <!--  class="task-delete" -->
                            <td align="right" class="task-actions">
                                <span class="ml-xs clickable text-danger task-delete" ng-click="removeTask(task)">
                                    <i class="fa fa-times"></i>
                                    Delete
                                </span>
                                <span class="ml-xs clickable text-success action-button" ng-show="task.status == 'Completed'" ng-click="openTask(task)">
                                    <i class="fa fa-check-circle"></i>
                                    Reopen
                                </span>
                                <span class="ml-xs clickable text-muted action-button" ng-show="task.status == 'InProgress'" ng-click="closeTask(task)">
                                    <i class="fa fa-check-circle-o"></i>
                                    Close
                                </span>
                                <span class="ml-xs clickable text-primary action-button" ng-show="task.status == 'Waiting'" ng-click="startTask(task)">
                                    <i class="fa fa-play"></i>
                                    Start
                                </span>

                                <span class="ml-xs" uib-dropdown ng-if="appConfig.connectors.cortex.enabled">
                                    <a href class="text-primary noline nowrap" ng-click="getTaskResponders(task.id, true)" uib-dropdown-toggle>
                                        <i class="text-primary fa fa-cog"></i>
                                        <!-- Responders
                                        <i class="text-primary fa fa-angle-down"></i> -->
                                    </a>
                                    <ul class="dropdown-menu align-right" uib-dropdown-menu>
                                      <li ng-if="taskResponders && taskResponders.length === 0">
                                        <a href ng-click="getTaskResponders(task.id, true)">
                                          <strong><i class="fa fa-refresh mr-xxs"></i> No responders available</strong>
                                        </a>
                                      </li>
                                      <li ng-repeat="responder in taskResponders">
                                        <a href ng-click="runResponder(responder.id, responder.name, task)">
                                          <strong>{{responder.name}}</strong>
                                          <br>
                                          <small>{{responder.description}}</small></a>
                                      </li>
                                    </ul>
                                </span>
                            </td>
                        </tr>
                        <tr ng-if="task.description && collapseOptions[task.id]">
                            <td colspan="7" class="wrap">
                                <div marked="task.description" class="mt-xxs filter-panel markdown"></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
